หน่วยความยาวของ CSS Container Query: การเรียนรู้การคำนวณหน่วยที่สัมพันธ์กับ Element สำหรับการออกแบบระดับโลก

ในโลกของการออกแบบเว็บที่เปลี่ยนแปลงอยู่เสมอ การสร้างอินเทอร์เฟซที่สามารถปรับเปลี่ยนและตอบสนองได้อย่างแท้จริงถือเป็นเป้าหมายสูงสุดเสมอมา แม้ว่าหน่วย viewport เช่น vw และ vh จะมีประโยชน์มานานหลายทศวรรษ แต่มันกลับผูกสไตล์เข้ากับหน้าต่างเบราว์เซอร์โดยตรง แนวทางนี้อาจมีข้อจำกัดเมื่อ element ต่างๆ จำเป็นต้องปรับเปลี่ยนตามพื้นที่ของ container ของมันเอง แทนที่จะเป็น viewport ทั้งหมด นี่คือที่มาของ CSS Container Queries ซึ่งเป็นฟีเจอร์ที่ปฏิวัติวงการและช่วยให้นักพัฒนาสามารถจัดสไตล์ส่วนประกอบต่างๆ ตามขนาดของ parent container ได้ หัวใจสำคัญของความสามารถนี้อยู่ที่ชุดหน่วยความยาวแบบใหม่ที่สัมพันธ์กับ element: cqw, cqh, cqi, และ cqb คู่มือฉบับสมบูรณ์นี้จะเจาะลึกถึงหน่วยเหล่านี้ อธิบายการคำนวณ การใช้งานจริง และวิธีนำไปใช้ประโยชน์เพื่อการออกแบบที่ตระหนักถึงบริบทและเป็นสากลอย่างแท้จริง

ข้อจำกัดของหน่วย Viewport

ก่อนที่เราจะเจาะลึกถึงรายละเอียดของหน่วยความยาวของ container query สิ่งสำคัญคือต้องเข้าใจว่าทำไมมันถึงจำเป็น หน่วย Viewport (vw, vh, vmin, vmax) กำหนดความยาวเป็นเปอร์เซ็นต์ของ viewport ตัวอย่างเช่น 1vw คือ 1% ของความกว้างของ viewport และ 1vh คือ 1% ของความสูงของ viewport

แม้ว่าหน่วยเหล่านี้จะมีประสิทธิภาพในการทำให้ layout ทั้งหมดตอบสนองได้ แต่ก็ไม่สามารถตอบสนองความต้องการของส่วนประกอบแต่ละชิ้นได้ ลองนึกถึงแถบนำทาง (navigation bar) ที่ต้องการปรับขนาดตัวอักษรหรือระยะห่างตามความกว้างของ parent nav element ของมัน ไม่ใช่หน้าต่างเบราว์เซอร์ หากแถบนำทางถูกฝังอยู่ใน sidebar ที่มีความกว้างคงที่ การใช้ vw สำหรับขนาดตัวอักษรจะทำให้เกิดการปรับขนาดที่ไม่สอดคล้องและมักจะไม่ถูกต้องเมื่อ viewport เปลี่ยนแปลง layout ภายในของส่วนประกอบอาจจะอึดอัดหรือกว้างเกินไป โดยไม่คำนึงถึงพื้นที่จริงที่มีอยู่

ข้อจำกัดนี้จะเด่นชัดยิ่งขึ้นใน UI ที่ซับซ้อนและเป็นสากล ซึ่งส่วนประกอบต่างๆ อาจซ้อนกันอยู่ใน layout ที่ยืดหยุ่นหลากหลาย หรือเมื่อต้องจัดการกับขนาดหน้าจอและอัตราส่วนภาพที่แตกต่างกันในกลุ่มผู้ใช้ทั่วโลก นักออกแบบและนักพัฒนามักต้องใช้ JavaScript เพื่อวัดขนาดของ container และใช้สไตล์แบบไดนามิก ซึ่งมีประสิทธิภาพน้อยกว่าและบำรุงรักษายากกว่า

ขอแนะนำ CSS Container Queries และหน่วยความยาว

CSS Container Queries ที่มาพร้อมกับกฎ @container ช่วยให้เราสามารถใช้สไตล์กับ element ตามขนาดของ ancestor ที่ใกล้ที่สุดซึ่งมีการกำหนดบริบทของ containment (โดยปกติจะตั้งค่าผ่าน container-type หรือ container) การเปลี่ยนแปลงกระบวนทัศน์นี้หมายความว่าตอนนี้ส่วนประกอบของเราสามารถตอบสนองต่อสภาพแวดล้อมที่อยู่ติดกับมันได้ ทำให้สามารถควบคุมการออกแบบที่ตอบสนองได้อย่างละเอียดในระดับใหม่

เพื่ออำนวยความสะดวกในการตอบสนองตาม container นี้ จึงได้มีการแนะนำชุดหน่วยความยาวใหม่ขึ้นมา:

• cqw (Container Width): 1% ของขนาด inline ของ container
• cqh (Container Height): 1% ของขนาด block ของ container
• cqi (Container Inline Size): เทียบเท่ากับ cqw
• cqb (Container Block Size): เทียบเท่ากับ cqh

หน่วยเหล่านี้ถูกออกแบบมาให้คล้ายคลึงกับหน่วย viewport ที่คู่กัน (vw และ vh) แต่จะคำนวณโดยสัมพันธ์กับขนาดของ container แทนที่จะเป็น viewport

การทำความเข้าใจขนาด "Inline" และ "Block"

คำว่าขนาด "inline" และ "block" เป็นพื้นฐานในการทำความเข้าใจหน่วยใหม่เหล่านี้ เป็นคำที่เป็นนามธรรมและไม่ขึ้นกับทิศทาง ซึ่งใช้ในข้อกำหนด CSS Writing Modes Level 3:

• Inline Axis: แกนที่ข้อความไหลไปตาม ในโหมดการเขียนแนวนอน (เช่น ภาษาอังกฤษ) นี่คือความกว้าง ในโหมดการเขียนแนวตั้ง (เช่น ภาษาญี่ปุ่นดั้งเดิม) นี่คือความสูง
• Block Axis: แกนที่ตั้งฉากกับแกน inline ในโหมดการเขียนแนวนอน นี่คือความสูง ในโหมดการเขียนแนวตั้ง นี่คือความกว้าง

ดังนั้น:

• cqi (Container Inline Size) หมายถึง 1% ของขนาดของ container ตามแนวแกน inline สำหรับภาษาอังกฤษ (โหมดการเขียนแนวนอน) สิ่งนี้เทียบเท่ากับ 1% ของความกว้างของ container
• cqb (Container Block Size) หมายถึง 1% ของขนาดของ container ตามแนวแกน block สำหรับภาษาอังกฤษ สิ่งนี้เทียบเท่ากับ 1% ของความสูงของ container

การนำคำที่เป็นนามธรรมเหล่านี้มาใช้ช่วยให้มั่นใจได้ว่าหน่วย container query จะทำงานได้อย่างสอดคล้องกันในโหมดการเขียนและทิศทางข้อความที่แตกต่างกัน ซึ่งเป็นสิ่งสำคัญสำหรับแอปพลิเคชันระดับโลกที่เนื้อหาอาจแสดงในภาษาและทิศทางที่หลากหลาย

การคำนวณหน่วยความยาวของ Container Query

การคำนวณนั้นตรงไปตรงมา:

• 1cqw = ความกว้างของ Container / 100
• 1cqh = ความสูงของ Container / 100
• 1cqi = ขนาด Inline ของ Container / 100 (เทียบเท่ากับ 1cqw ในโหมดการเขียนแนวนอน)
• 1cqb = ขนาด Block ของ Container / 100 (เทียบเท่ากับ 1cqh ในโหมดการเขียนแนวนอน)

ลองดูตัวอย่าง หาก element ที่เป็น container มีความกว้างที่คำนวณได้ 500 พิกเซล และความสูงที่คำนวณได้ 300 พิกเซล:

• 10cqw จะเป็น (500px / 100) * 10 = 50px
• 25cqh จะเป็น (300px / 100) * 25 = 75px
• 50cqi จะเป็น (500px / 100) * 50 = 250px
• 100cqb จะเป็น (300px / 100) * 100 = 300px

สิ่งสำคัญคือหน่วยเหล่านี้เป็นแบบไดนามิก หากขนาดของ container เปลี่ยนแปลง (เช่น จากการปรับขนาดหน้าต่าง หรือการเพิ่ม/ลบเนื้อหาที่มีผลต่อ layout) คุณสมบัติ CSS ใดๆ ที่ใช้หน่วยเหล่านี้จะคำนวณใหม่และอัปเดตโดยอัตโนมัติตามไปด้วย

การใช้งานจริงสำหรับการออกแบบระดับโลก

พลังของ cqw, cqh, cqi, และ cqb อยู่ที่ความสามารถในการสร้างส่วนประกอบที่ปรับเปลี่ยนได้สูงซึ่งตอบสนองต่อบริบทที่อยู่ติดกับมัน สิ่งนี้มีค่าอย่างยิ่งสำหรับการพัฒนาเว็บในระดับสากล

1. การจัดรูปแบบตัวอักษรสำหรับภาษาที่หลากหลาย

ภาษาต่างๆ มีความกว้างของตัวอักษรและความยาวของประโยคที่แตกต่างกัน ขนาดตัวอักษรที่เหมาะสมกับวลีภาษาอังกฤษสั้นๆ อาจใหญ่เกินไปสำหรับประโยคภาษาเยอรมันที่ยาว หรือเล็กเกินไปสำหรับชุดอักขระเอเชียตะวันออกที่กะทัดรัดภายในส่วนประกอบเดียวกัน การใช้หน่วย container query สำหรับ font-size ช่วยให้ข้อความสามารถปรับขนาดได้อย่างสวยงามตามพื้นที่แนวนอนที่มีอยู่ภายในส่วนประกอบของมัน

ตัวอย่าง: ส่วนประกอบการ์ดที่แสดงชื่อบทความ

            .card {
  container-type: inline-size;
  width: 300px; /* Example fixed width for the card */
}

.card-title {
  font-size: 2.5cqw; /* Font size scales with card width */
  line-height: 1.4;
}

/* Example query for smaller cards */
@container (max-width: 200px) {
  .card-title {
    font-size: 3cqw; /* Slightly larger font for narrower cards to maintain readability */
  }
}

            

              
                Copy
              
            
          

ในสถานการณ์นี้ หาก element .card กว้าง 300px ขนาดตัวอักษรของชื่อเรื่องจะเป็น 2.5% ของ 300px ซึ่งคือ 7.5px หากการ์ดหดลงเหลือ 200px ขนาดตัวอักษรจะกลายเป็น 3% ของ 200px ซึ่งคือ 6px สิ่งนี้ช่วยให้มั่นใจได้ว่าข้อความยังคงอ่านได้ง่ายและได้สัดส่วนที่เหมาะสมภายในขอบเขตของการ์ด และปรับตัวเข้ากับเนื้อหาข้อความที่ยาวขึ้นหรือสั้นลงได้อย่างสวยงาม

2. การปรับระยะห่างและ Layout

Padding, margin และ gap ภายในส่วนประกอบสามารถปรับเปลี่ยนแบบไดนามิกได้ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับ element เช่น เมนูนำทาง, input ของฟอร์ม หรือแกลเลอรีรูปภาพ ที่ระยะห่างต้องปรับตามความกว้างของ container ของส่วนประกอบ

ตัวอย่าง: เมนูนำทางที่ตอบสนองภายใน sidebar ที่ยืดหยุ่น

            .sidebar {
  container-type: inline-size;
  width: 25%; /* Example: Sidebar takes 25% of the parent's width */
}

.nav-link {
  padding: 1cqw 1.5cqw; /* Padding scales with the sidebar's width */
  margin-bottom: 1cqw;
}

.nav-icon {
  width: 3cqw; /* Icon size relative to sidebar width */
  height: auto;
}

            

              
                Copy
              
            
          

เมื่อความกว้างของ sidebar เปลี่ยนแปลง (อาจเป็นเพราะพื้นที่เนื้อหาหลักถูกปรับขนาด) ขนาดของ padding และไอคอนภายในลิงก์นำทางจะปรับตามโดยอัตโนมัติ ทำให้ยังคงลำดับชั้นทางสายตาที่สอดคล้องกันเมื่อเทียบกับพื้นที่ที่มีอยู่

3. อัตราส่วนภาพของรูปภาพและสื่อ

ในขณะที่คุณสมบัติ aspect-ratio และ intrinsic sizing นั้นมีประสิทธิภาพ บางครั้งคุณต้องการให้สื่อปรับตัวเข้ากับขนาดของ container โดยตรงมากขึ้น โดยเฉพาะอย่างยิ่งเมื่อ container เองเป็นตัวขับเคลื่อนหลักของการตอบสนอง

ตัวอย่าง: รูปภาพ hero ที่ควรเติมเต็มความกว้างของ container แต่ยังคงอัตราส่วนภาพที่เฉพาะเจาะจงเมื่อเทียบกับความกว้างนั้น

            .hero-section {
  container-type: inline-size;
  width: 100%;
}

.hero-image {
  width: 100%;
  height: 50cqh; /* Image height is 50% of the hero section's height */
  object-fit: cover;
}

            

              
                Copy
              
            
          

ในที่นี้ 50cqh ช่วยให้มั่นใจว่าความสูงของรูปภาพจะเป็นครึ่งหนึ่งของความสูงของ container เสมอ หาก container สูงและแคบ รูปภาพก็จะสะท้อนลักษณะนั้น หาก container เตี้ยและกว้าง รูปภาพก็จะปรับตามเช่นกัน นี่เป็นสิ่งที่ดีสำหรับแบนเนอร์ hero หรือรูปภาพพื้นหลังที่ต้องการความสอดคล้องกันทั่วโลก

4. การปรับส่วนประกอบที่ซับซ้อน (เช่น ตารางข้อมูล)

ตารางข้อมูลขึ้นชื่อในเรื่องความท้าทายด้านการตอบสนอง โดยเฉพาะเมื่อมีหลายคอลัมน์และภาษาที่แตกต่างกัน หน่วย container query สามารถช่วยจัดการความกว้างของคอลัมน์ ขนาดตัวอักษร และ padding ของเซลล์ได้

ตัวอย่าง: ตารางที่ความกว้างของคอลัมน์ปรับตามความกว้างโดยรวมของตาราง

            .data-table-container {
  container-type: inline-size;
  overflow-x: auto; /* Important for tables */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header,
.table-cell {
  padding: 1.5cqw;
  font-size: 1.2cqw;
}

/* Assigning relative widths to specific columns */
.column-name {
  width: 25cqi; /* 25% of table container's inline size */
}

.column-value {
  width: 75cqi; /* 75% of table container's inline size */
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ padding, ขนาดตัวอักษร และความกว้างของคอลัมน์ทั้งหมดถูกกำหนดโดยสัมพันธ์กับ .data-table-container เมื่อ container แคบลงหรือกว้างขึ้น layout ภายในของตารางจะปรับตามสัดส่วน ทำให้สามารถอ่านได้ง่ายขึ้นใน breakpoint ต่างๆ และสำหรับผู้ใช้ในภูมิภาคต่างๆ ที่อาจพบกับความยาวข้อมูลที่แตกต่างกัน

5. การจัดการโหมดการเขียนแนวตั้ง

สำหรับแอปพลิเคชันที่รองรับโหมดการเขียนแนวตั้ง (เช่น ภาษาจีนดั้งเดิม, ญี่ปุ่น) ความแตกต่างระหว่าง cqi และ cqb จะมีความสำคัญอย่างยิ่ง ในโหมดการเขียนแนวตั้ง แกน inline จะเป็นแนวตั้ง และแกน block จะเป็นแนวนอน

ลองพิจารณาเมนูนำทางแนวตั้ง:

            body {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.vertical-nav {
  container-type: inline-size; /* Container's inline size is now its height */
  height: 100vh; /* Example */
  width: 100px; /* Example */
}

.nav-item {
  padding: 1cqi 2cqi; /* Padding relative to the container's height (inline size) */
  margin-bottom: 1cqi; /* Margin relative to the container's height */
}

.nav-icon {
  width: auto; /* Auto width */
  height: 3cqi; /* Icon height scales with container's height */
}

            

              
                Copy
              
            
          

ในการตั้งค่านี้ 1cqi จะหมายถึง 1% ของความสูงของ container ในขณะที่ 1cqw จะหมายถึง 1% ของความกว้างของ container สิ่งนี้ช่วยให้มั่นใจได้ว่าการจัดสไตล์ยังคงถูกต้องตามบริบทโดยไม่คำนึงถึงโหมดการเขียน ซึ่งเป็นข้อได้เปรียบที่สำคัญสำหรับแอปพลิเคชันระดับโลก

การรองรับของเบราว์เซอร์และข้อควรพิจารณา

Container Queries รวมถึงหน่วยความยาว เป็นฟีเจอร์ที่ค่อนข้างใหม่แต่ได้รับการรองรับจากเบราว์เซอร์อย่างกว้างขวางแล้ว ณ ปลายปี 2023 และต้นปี 2024 เบราว์เซอร์สมัยใหม่เช่น Chrome, Firefox, Safari และ Edge ให้การรองรับที่ยอดเยี่ยม

ข้อควรพิจารณาที่สำคัญ:

• ความเข้ากันได้ของเบราว์เซอร์: ตรวจสอบข้อมูลการรองรับของเบราว์เซอร์ล่าสุดเสมอ สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ container queries คุณจะต้องมีกลยุทธ์สำรอง (fallback) ซึ่งมักจะเกี่ยวข้องกับ JavaScript หรือ CSS media queries ที่ง่ายกว่า
• container-type และ container-name: เพื่อที่จะใช้หน่วย container query, parent element จะต้องสร้างบริบทของ container ขึ้นมาก่อน ซึ่งโดยทั่วไปจะทำได้โดยใช้ container-type: normal; (ซึ่งหมายถึง inline-size เป็นแกนการปรับขนาดเริ่มต้น) หรือ container-type: inline-size; หรือ container-type: size; คุณยังสามารถตั้งชื่อ container โดยใช้ container-name เพื่อกำหนดเป้าหมายไปยัง ancestor ที่ต้องการได้
• ประสิทธิภาพ: แม้ว่าโดยทั่วไปจะมีประสิทธิภาพดี แต่ควรระวังการคำนวณที่ซับซ้อนเกินไปหรือมี element จำนวนมากที่ต้องอาศัยการปรับขนาดแบบไดนามิก ในสถานการณ์ส่วนใหญ่ ประสิทธิภาพไม่ใช่ปัญหา
• กลยุทธ์สำรอง (Fallback Strategies): ใช้ @supports queries เพื่อตรวจสอบการรองรับ container query และจัดเตรียมสไตล์ทางเลือกหากจำเป็น

            .my-component {
  /* Fallback for older browsers */
  width: 100%;
  padding: 15px; /* Fixed padding */
  font-size: 16px; /* Fixed font size */
}

@container (min-width: 500px) {
  @supports (container-type: inline-size) {
    .my-component {
      /* Container query styles override fallbacks */
      padding: 2cqw;
      font-size: 3cqw;
    }
  }
}

            

              
                Copy
              
            
          

การจัดโครงสร้าง CSS ของคุณสำหรับ Container Queries

รูปแบบที่พบบ่อยคือการกำหนดบริบทของ container บน parent element แล้วใช้ container queries เพื่อจัดสไตล์ child elements

รูปแบบที่ 1: การปรับขนาด Container แบบ Inline

นี่เป็นกรณีการใช้งานที่พบบ่อยที่สุด ซึ่งส่วนประกอบต่างๆ จะปรับเปลี่ยนตามความกว้างของมัน

            .component-wrapper {
  container-type: inline-size;
  width: 100%; /* Or any other width */
}

.component-content {
  font-size: 2cqw;
  padding: 1cqw;
}

@container (max-width: 400px) {
  .component-content {
    font-size: 3cqw;
    padding: 1.5cqw;
  }
}

            

              
                Copy
              
            
          

รูปแบบที่ 2: การปรับขนาด Container แบบ Block

มีประโยชน์สำหรับ element ที่ต้องปรับเปลี่ยนตามความสูง เช่น sticky header หรือ element ที่มีความสูงคงที่ภายใน flex หรือ grid layout

            .vertical-spacer {
  container-type: block-size;
  height: 50vh;
}

.vertical-content {
  margin-top: 5cqb;
}

            

              
                Copy
              
            
          

รูปแบบที่ 3: การปรับขนาดแบบผสม (โดยใช้ size)

หากคุณต้องการอ้างอิงทั้งความกว้างและความสูงของ container ให้ใช้ container-type: size;

            
.aspect-ratio-box {
  container-type: size;
  width: 100%;
  height: 300px;
}

.inner-element {
  width: 100%;
  /* Make height 50% of the container's width, adjusted by 20% of its height */
  height: calc(50cqw + 20cqb);
}

            

              
                Copy
              
            
          

มากกว่าแค่การปรับขนาดธรรมดา: เทคนิคขั้นสูง

พลังที่แท้จริงจะปรากฏขึ้นเมื่อคุณรวมหน่วย container query เข้ากับฟีเจอร์ CSS อื่นๆ เช่น calc(), clamp() และ media queries

1. การใช้ calc() กับหน่วย Container

รวมหน่วย container เข้ากับหน่วยคงที่หรือหน่วยสัมพัทธ์อื่นๆ เพื่อการควบคุมที่ละเอียดยิ่งขึ้น

ตัวอย่าง: ปุ่มที่ยังคงมี padding ขั้นต่ำ แต่ปรับขนาดตัวอักษรได้

            
.action-button {
  container-type: inline-size;
  display: inline-block;
  padding: 10px 2cqw; /* Fixed vertical padding, dynamic horizontal padding */
  font-size: clamp(14px, 2.5cqw, 20px); /* Clamp font size between 14px and 20px */
}

            

              
                Copy
              
            
          

2. การออกแบบที่ตอบสนองสำหรับส่วนประกอบระดับโลก

เมื่อออกแบบส่วนประกอบสำหรับผู้ใช้ทั่วโลก ให้คิดว่าความยาวของเนื้อหาที่แตกต่างกัน ชุดอักขระ หรือแม้แต่ความชอบของผู้ใช้เกี่ยวกับอินเทอร์เฟซอาจส่งผลกระทบต่อส่วนประกอบได้อย่างไร Container queries คือพันธมิตรของคุณ

• การรองรับหลายภาษา: ตรวจสอบให้แน่ใจว่าข้อความยังคงอ่านได้และส่วนประกอบไม่พังเมื่อมีการแปลที่ยาวขึ้นหรือสั้นลง
• การเข้าถึง (Accessibility): ความชอบของผู้ใช้เกี่ยวกับขนาดข้อความสามารถรองรับได้ดีขึ้นเมื่อส่วนประกอบปรับขนาดตามบริบท
• การเพิ่มประสิทธิภาพ: สำหรับรูปภาพหรือกราฟิกที่ซับซ้อน container queries สามารถช่วยให้แน่ใจว่ามันพอดีกับพื้นที่ที่จัดสรรไว้โดยไม่มีการโหลดหรือการเลื่อนของ layout มากเกินไป

สรุป

หน่วยความยาวของ CSS Container Query – cqw, cqh, cqi, และ cqb – แสดงถึงก้าวกระโดดที่สำคัญในการออกแบบเว็บที่ตอบสนอง ด้วยการเปิดใช้งานการคำนวณหน่วยที่สัมพันธ์กับ element ทำให้นักพัฒนาสามารถสร้างส่วนประกอบที่ปรับเปลี่ยนได้สูงซึ่งตอบสนองอย่างชาญฉลาดต่อบริบท layout ที่เฉพาะเจาะจงของมัน แทนที่จะเป็น viewport ทั้งหมด

สำหรับการพัฒนาเว็บระดับโลก หน่วยเหล่านี้เป็นสิ่งที่ขาดไม่ได้ ช่วยให้การปรับขนาดตัวอักษรข้ามภาษาต่างๆ มีความแข็งแกร่งมากขึ้น การปรับระยะห่างที่ยืดหยุ่นภายใน layout ที่ซ้อนกัน และอัตราส่วนภาพที่สอดคล้องกันสำหรับสื่อ ทั้งหมดนี้ในขณะที่ยังเคารพโหมดการเขียนที่หลากหลาย การนำ container queries และหน่วยความยาวที่เกี่ยวข้องมาใช้จะนำไปสู่อินเทอร์เฟซที่ยืดหยุ่น บำรุงรักษาง่าย และเป็นมิตรต่อผู้ใช้สำหรับผู้ชมทั่วโลก

เริ่มทดลองใช้หน่วยเหล่านี้ในโปรเจกต์ต่อไปของคุณ แล้วคุณจะพบว่ามันปลดล็อกระดับใหม่ของการควบคุมและความสง่างามในขั้นตอนการทำงานของการออกแบบที่ตอบสนอง ทำให้เว็บไซต์ของคุณปรับตัวเข้ากับ container ใดๆ ได้อย่างแท้จริง ไม่ว่าจะอยู่ที่ใดในโลก